<template>
  <div>
    <lunar-full-calendar
      ref="calendar"
      :events="events"
      :config="config"
      @event-selected="eventSelected"
      @day-click="dayClick"
      @event-drop="eventDrop"
    />
    <FormDialog :title="title" :show.sync="dialogFormVisible" width="40%" :append-to-body="true" @on-ok="ok" @on-cancel="cancel">
      <ResultForm v-if="dialogFormVisible" :id="editId" ref="resultForm" :duty-arrangement-id="dutyArrangementId" />
    </FormDialog>
  </div>
</template>

<script>
import { getStartMonth, getEndMonth, addMonths } from '@neu/biz-core/utils/utils'
import { list, toOtherDate } from '@neu/dcom-ui/api/dutyArrangementResult'
import { LunarFullCalendar } from 'vue-lunar-full-calendar'
import FormDialog from '@neu/biz-core/components/FormDialog'
import ResultForm from './editResultForm'
import { formatDate } from '@neu/biz-core/utils/utils'

export default {
  name: 'Calender',
  components: {
    LunarFullCalendar,
    FormDialog,
    ResultForm
  },
  props: {
    // 根据id可判断是新建还是更新
    dutyArrangementId: {
      required: false,
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      events: [],
      config: {
        selectable: true,
        locale: 'zh-cn',
        buttonText: {
          today: '今天',
          month: '月',
          week: '周',
          day: '日'
        },
        header: {
          left: 'prev today',
          // left: 'prevYear,prev,next,nextYear',
          center: 'title',
          // right: 'myFilter today'
          right: 'next'
        },
        eventLimit: 3,
        noEventsMessage: '暂无数据',
        eventLimitText: '更多...',
        firstDay: 0,
        defaultView: 'month',
        allDaySlot: true,
        allDayText: '',
        timezone: 'local',
        slotLableFormat: 'HH:mm',
        chooseStartDay: '',
        chooseEndDay: '',
        eventOrder: 'orderid'
      },
      // 标题
      title: '新增',
      // 编辑传递的参数
      editId: -1,
      // 编辑新增的弹窗
      dialogFormVisible: false,
      // 当前选择的日期
      selectDate: null,
      searchObj: {
        s_dutyArrangementId: this.dutyArrangementId,
        s_startTime: getStartMonth().getTime(),
        s_endTime: getEndMonth().getTime()
      }

    }
  },
  watch: {
    // 监控id的变化，初始化表单数据
    dutyArrangementId: {
      handler() {
        this.fetch()
      },
      immediate: true
    }
  },
  mounted() {
    const self = this
    // 当前日期的前一个月
    const leftBtn = self.$refs.calendar.$refs.calendar.children[0].children[0].children[0]
    leftBtn.addEventListener('click', function() {
      var currentStartDate = new Date(self.searchObj.s_startTime)
      self.searchObj.s_startTime = addMonths(currentStartDate, -1).getTime()
      self.searchObj.s_endTime = getEndMonth(new Date(self.searchObj.s_startTime).getFullYear(), new Date(self.searchObj.s_startTime).getMonth() + 1).getTime()
      self.fetch()
    })

    // 当前日期
    const currentBtn = self.$refs.calendar.$refs.calendar.children[0].children[0].children[1]
    currentBtn.addEventListener('click', function() {
      self.searchObj.s_startTime = getStartMonth().getTime()
      self.searchObj.s_endTime = getEndMonth().getTime()
      self.fetch()
    })

    // 当前日期的后一个月
    const rightBtn = self.$refs.calendar.$refs.calendar.children[0].children[1].children[0]
    rightBtn.addEventListener('click', function() {
      var currentStartDate = new Date(self.searchObj.s_startTime)
      self.searchObj.s_startTime = addMonths(currentStartDate, 1).getTime()
      self.searchObj.s_endTime = getEndMonth(new Date(self.searchObj.s_startTime).getFullYear(), new Date(self.searchObj.s_startTime).getMonth() + 1).getTime()
      self.fetch()
    })
  },
  methods: {
    // 查询初始化排班数据
    fetch() {
      if (this.dutyArrangementId !== -1) {
        list(this.searchObj).then(res => {
          this.events = []
          res.data.forEach(element => {
            const obj = {
              id: element.id,
              title: '[' + element.classesName + ']' + element.teamGroupName,
              start: element.startTime,
              color: element.color
            }
            this.events.push(obj)
          })
        })
      }
    },
    /** 点击天触发 */
    dayClick(date, jsEvent, view) {
      if (new Date().getTime() > new Date(date).getTime()) {
        this.$message({
          showClose: true,
          message: '以前的日期不能进行操作',
          type: 'error'
        })
        return false
      }
      this.editId = -1
      this.selectDate = date
      this.dialogFormVisible = true
      this.title = formatDate(date, 'YYYY-MM-DD') + '  新建值班信息'
    },
    /** 点击事件触发 */
    eventSelected(event, jsEvent, view, news) {
      if (new Date().getTime() > new Date(event.start).getTime()) {
        this.$message({
          showClose: true,
          message: '以前的日期不能进行操作',
          type: 'error'
        })
        return false
      }
      this.editId = event.id
      this.dialogFormVisible = true
      this.title = '操作'
      this.selectDate = event.start
    },
    /** 拖住结束回调  revertFunc 恢复到原来*/
    eventDrop(event, delta, revertFunc) {
      // 过去的时间不能拖拽
      if (new Date().getTime() > new Date(event.start).getTime()) {
        this.$message({
          showClose: true,
          message: '不能拖动到以前的日期',
          type: 'error'
        })
        revertFunc()
        return false
      }

      toOtherDate(event.id, new Date(event.start)).then(res => {
        this.$message({
          showClose: true,
          message: '操作成功！',
          type: 'success'
        })
      })
    },
    /** 新增或者标记确认 */
    ok() {
      // 直接调用表单实例的保存方法
      this.$refs.resultForm.save(this.selectDate).then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '操作成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.fetch()
        // 关闭对话框
        this.editId = -1
        this.dialogFormVisible = false
        this.$refs.resultForm.reset()
      })
    },
    /** 新增或者标记取消 */
    cancel() {
      this.dialogFormVisible = false
      this.$refs.resultForm.reset()
    }

  }
}
</script>
